<template>
  <div class="cus">
    <div class="cus_box">
      <div class="title">
        <span>{{ res.id ? "Edit" : "Add" }}菜单</span
        ><i @click="$emit('add_menu_call')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="Type" prop="type">
            <el-radio-group v-model="formData.type">
              <el-radio label="0">目录</el-radio>
              <el-radio label="1">菜单</el-radio>
              <el-radio label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单Name" prop="name">
            <el-input
              v-model="formData.name"
              type="text"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item label="范围" prop="useType">
            <el-select v-model="formData.useType" placeholder="Please Select">
              <el-option label="三者共用" value="0"></el-option>
              <el-option label="总平台" value="1"></el-option>
              <el-option label="仅Operator" value="2"></el-option>
              <el-option label="仅区域代理" value="3"></el-option>
              <el-option label="仅商家" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上级菜单" prop="parentId">
            <el-button @click="show_parent_meun">{{
              formData.label
            }}</el-button>
          </el-form-item>
          <el-form-item label="菜单URL" prop="url">
            <el-input
              v-model="formData.url"
              type="text"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="formData.type == 2"
            label="页面对应id"
            prop="buttonCode"
          >
            <el-input
              v-model="formData.buttonCode"
              type="text"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item label="授权标识" prop="perms">
            <el-input
              v-model="formData.perms"
              type="text"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
        </el-form>

        <div class="btns">
          <el-button @click="$emit('add_menu_call')">Cancel</el-button>
          <el-button @click="submitForm('formData')" type="primary"
            >Confirm</el-button
          >
        </div>
      </div>
    </div>

    <parent_meun
      :res="parent_meun"
      v-if="parent_meun.show"
      v-on:parent_meun_call="parent_meun_call"
    ></parent_meun>
  </div>
</template>

<script>
import parent_meun from "./parent_meun";
export default {
  components: {
    parent_meun
  },
  data() {
    return {
      parent_meun: {
        show: false,
        userType: null
      },
      parentData: {
        label: "Please Select",
        value: ""
      },
      formData: {
        type: "0",
        name: "",
        useType: "1",
        url: "",
        perms: "",
        label: "Please Select",
        parentId: "",
        buttonCode: ""
      },
      rules: {
        type: [{ required: true, message: "Please Enter", trigger: "blur" }],
        name: [{ required: true, message: "Please Enter", trigger: "blur" }],
        useType: [{ required: true, message: "Please Enter", trigger: "blur" }],
        parentId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ],
        url: [{ required: false, message: "Please Enter", trigger: "blur" }],
        perms: [{ required: false, message: "Please Enter", trigger: "blur" }],
        buttonCode: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      }
    };
  },
  props: ["res"],
  mounted() {
    if (this.res.id) {
      this.getData();
    }
  },
  methods: {
    async getData() {
      var res = await this.apis.sys_menu_info({
        menuId: this.res.id
      });
      var data = res.data;
      console.log(data);
      this.formData.type = data.type == 0 ? "0" : data.type + "";
      this.formData.name = data.name;
      this.formData.useType = "" + data.useType;
      this.formData.label = data.parentName || "无";
      this.formData.parentId = data.parentId;
      this.formData.url = data.url;
      this.formData.perms = data.perms;
      this.formData.buttonCode = data.buttonCode;
    },
    submitForm(formName) {
      console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.res.id) {
            this.add_menu();
          } else {
            this.edit_menu();
          }
        }
      });
    },
    async edit_menu() {
      var res = await this.apis.sys_menu_update({
        menuId: this.res.id,
        parentId:
          this.formData.parentId == 999999 ? null : this.formData.parentId,
        name: this.formData.name,
        perms: this.formData.perms,
        type: this.formData.type,
        url: this.formData.url,
        useType: this.formData.useType,
        buttonCode: this.formData.buttonCode
      });
      this.$emit("add_menu_call", true);
    },
    async add_menu() {
      var res = await this.apis.sys_menu_save({
        parentId: this.formData.parentId == 999999 ? 0 : this.formData.parentId,
        name: this.formData.name,
        perms: this.formData.perms,
        type: this.formData.type,
        url: this.formData.url,
        useType: this.formData.useType,
        buttonCode: this.formData.buttonCode
      });
      console.log(res);
      this.$emit("add_menu_call", true);
    },
    show_parent_meun() {
      this.parent_meun.userType = this.formData.useType;
      this.parent_meun.show = true;
    },
    parent_meun_call(res) {
      this.parent_meun.show = false;
      if (res) {
        this.formData.label = res.name;
        this.formData.parentId = res.menuId;
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>
